<template>
	<myHeadTab>招生能力测试</myHeadTab>
	<view style="background: #F1F5FF;height: 100vh;padding-top: 32rpx;">
		
		
		
		<view style="width: 100%;height: 44rpx;display: flex;" >
		
			<view style="width: 32rpx;height: 100%;"></view>
			
			<view >
				<view @click="selectTab = 0">
					<text :class="[selectTab == 0 ? 'f1-active' : 'f1']">进行中</text>
					<view :class="[selectTab == 0 ? 'hr' : '']"></view>
				</view>	
			</view>
				
				<view style="width: 48rpx;height: 100%;"></view>
			
			<view >
				<view @click="selectTab = 1">
					<text :class="[selectTab == 1 ? 'f1-active' : 'f1']">已完成</text>
					<view  :class="[selectTab == 1 ? 'hr2' : '']"></view>
				</view>
			</view>
				
		</view>
		
		<view style="height: 30rpx;width: 100%;"></view>
		
		<template v-for="(item,index) in selectTab == 0 ? runTest : finishedTest" :key="index">
			<uni-row >
			<uni-col :span="22" :offset="1" >
				<view  :class="[selectTab == 0? 'card1':'card2']" style="padding-top: 32rpx;" @click="selectTab == 0 ? handleRunClick(item) : handleFinishedClick(item)" >
					
					<uni-row >
						
						<uni-col :span="23" :offset="1" >
							<view style="display: flex;">
								<!-- <view v-if="selectTab == 1" style="display: flex;">
								<view style="height: 48rpx;width: 48rpx;">
									<image src="" style="position: relative; top: -4rpx; height: 48rpx;width: 48rpx;border-radius: 100%;border: 1px solid black;"></image>
								</view>
							
									<view style="height: 100%;width: 16rpx;"></view>
								</view> -->
							
							
							
								<view style="height: 44rpx;width: 100%;">
									<text class="f2">{{item.title}}</text>
								</view>
							</view>
							
							
						</uni-col>
						
						<uni-col :span="5" >
							
							<!-- <view v-if="item.status" style="height: 44rpx;display: flex;justify-content: end;">
								<image style="width: 16rpx;height: 16rpx;position: relative; top: 18rpx;right: 6rpx;" src="../../static/点.png"></image>
								<text class="f3" style="line-height: 44rpx;position: relative;top: 2rpx;">开放报名中</text>
							</view> -->
							
						</uni-col>
						
					</uni-row>
						
						<view style="height: 12rpx;width: 100%;"></view>
						
					<uni-row :class="[selectTab == 0?'c1':'c2']">
						<uni-col :span="16" :offset="1">
							<view>
								<text class="f4">开始日期：{{item.beginTime}}</text>
							</view>
							<view>
								<text class="f4">结束日期：{{item.endTime}}</text>
							</view>
							<view>
								<text class="f4">{{selectTab == 0 ? '剩余提交时间：': '行政区域地址：'}}<font class="f7">{{item.remainTime}}</font></text>
							</view>
						
						</uni-col>
					</uni-row>
						
						<view style="width: 100%;height: 10rpx;"></view>
						
					<uni-row>
							<uni-col :span="22" :offset="1">
								<view style="opacity: 0.24;border-top: 2rpx solid #979797;">
									
								</view>
							</uni-col>
						</uni-row>
						
						<view style="height: 26rpx;width: 100%;"></view>
						
						<uni-row  style="height: 64rpx;">
							<uni-col :span="8" :offset="2">
								<view style="height: 64rpx;position: relative;top: -7rpx;">
										<template v-for="(avatar,innerIndex) in item.avatarList" :key="innerIndex">
											<image  :src="avatar" style="width: 64rpx;height: 64rpx;border: 2rpx solid black;border-radius: 100%;margin-left: -26rpx;"></image>
										</template>
								</view>
								
							</uni-col>
							<uni-col :span="13" :offset="1">
								<view style="width: 100%;display: flex;justify-content: end;align-items: center;position: relative;left: -12rpx;top:5rpx">
									<text class="f5" style="line-height: 40rpx;">{{item.memberNum}}人已经完成，赶紧测试吧！</text>
								</view>
								
							</uni-col>
							
						</uni-row>
						
						
				</view>
			</uni-col>
		</uni-row>
		
		<view style="width: 100%;height: 24rpx;"></view>
		
		</template>
		
		
		
	</view>
</template>

<script setup>
	import myHeadTab from '../../component/myHeadTab/index.vue'
	
	import {onMounted, ref} from 'vue'
	const selectTab = ref(0);
	
	const userId = ref(1);
	
	onMounted(()=>{
		// 获取未完成的测试
		uni.request({
			url: '/data/test.json',
			data: {userId : userId.value},
			method: 'POST',
			success(res) {
				runTest.value.push(res.data.at(0));
				runTest.value.push(res.data.at(1));
			}
		})
		// 获取已完成的测试
		uni.request({
			url: '/data/test.json',
			data: {userId : userId.value},
			method: 'POST',
			success(res) {
				finishedTest.value.push(res.data.at(2));
				finishedTest.value.push(res.data.at(3));
			}
		})
	})
	
	const runTest = ref([])
	
	const finishedTest = ref([])
	
	
	function handleRunClick(item){
		uni.navigateTo({
			url:`/pages/test/component/testBegin?testId=${item.testId}`
		})
	}
	
	function handleFinishedClick(item){
		uni.navigateTo({
			url:`/pages/test/component/testInfoFinished?testId=${item.testId}`
		})
	}
	
</script>

<style scoped>
.f1-active{
	font-family: PingFangSC-Medium;
	font-weight: 500;
	font-size: 32rpx;
	color: #000000;
	letter-spacing: 0;
}

.f1{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 32rpx;
	color: #5E5E5E;
	letter-spacing: 0;
}

.hr{
	width: 96rpx;
	height: 8rpx;
	background-image: linear-gradient(90deg, #ffffff00 0%, #276EFF 77%);
}

.hr2{
	width: 96rpx;
	height: 8rpx;
	background-image: linear-gradient(90deg, #ffffff00 0%, #276EFF 77%);
}

.card1{
	height: 308rpx;
	background: #FFFFFF;
	box-shadow: 0 6rpx 12rpx 0 #c9cfd980;
	border-radius: 16rpx;
}

.card2{
	height: 308rpx;
	background: #FFFFFF;
	box-shadow: 0 6rpx 12rpx 0 #c9cfd980;
	border-radius: 16rpx;
}

.f2{
	font-family: PingFangSC-Medium;
	font-weight: 500;
	font-size: 32rpx;
	color: #000000;
	letter-spacing: 0;
}

.f3{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #276EFF;
	letter-spacing: 0;
	line-height: 40rpx;
}

.f4{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #5D5C5C;
	letter-spacing: 0;
	line-height: 40rpx;
}

.f5{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #5D5C5C;
	letter-spacing: 0;
	line-height: 40rpx;
}
.f6{
	font-family: PingFangSC-Medium;
	font-weight: 500;
	font-size: 36rpx;
	color: #FFFFFF;
}

.f7{
	 color: #ff7700;
	 font-size: 24rpx;
	 font-face: PingFangSC;
	 font-weight: 400;
	 line-height: 40rpx;
	 letter-spacing: 0;
	 paragraph-spacing: 0;
	 text-align: left;
}

</style>
